@tailwind base;
@tailwind components;
@tailwind utilities;

.animate__animated.animate__fastest {
	-webkit-animation-duration: calc(1s / 4);
	animation-duration: calc(1s / 4);
	-webkit-animation-duration: calc(var(--animate-duration) / 4);
	animation-duration: calc(var(--animate-duration) / 4);
}

@layer base {
	html {
		font-family: 'Rubik', system-ui, sans-serif;
	}
	body {
		scrollbar-width: 10px;
		scrollbar-color: theme(backgroundColor.base-100) theme(backgroundColor.neutral);
	}
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}
	::-webkit-scrollbar-thumb {
		background: theme(backgroundColor.neutral);
		border-radius: 10px;
	}
	input[type='number'] {
		@apply !pr-0;
	}
	audio {
		@apply h-10;
	}
	audio::-webkit-media-controls-enclosure {
		@apply bg-base-100 max-h-10 rounded-lg;
	}
	[data-theme='dark'] audio::-webkit-media-controls-mute-button,
	[data-theme='dark'] video::-webkit-media-controls-mute-button {
		background-image: url('');
	}
	audio::-webkit-media-controls-mute-button,
	video::-webkit-media-controls-mute-button {
		background-image: url('');
	}
	[data-theme='dark'] audio::-webkit-media-controls-play-button,
	[data-theme='dark'] video::-webkit-media-controls-play-button {
		background-image: url('');
	}
	audio::-webkit-media-controls-play-button,
	video::-webkit-media-controls-play-button {
		background-image: url('');
	}
	video {
		@apply rounded-lg shadow-xl;
	}
	video::-webkit-media-controls-panel {
		background: linear-gradient(to bottom, transparent, theme(backgroundColor.base-300)) repeat-x bottom left;
	}
	[data-theme='dark'] video::-webkit-media-controls-fullscreen-button {
		background-image: url('');
	}
	video::-webkit-media-controls-fullscreen-button {
		background-image: url('');
	}
}

@layer components {
	.btn-outline {
		@apply border-2;
	}
	.btn-primary:not(.btn-outline, .btn-ghost) {
		@apply !text-base-100;
	}
	.btn-primary.btn-outline,
	.btn-primary.btn-ghost {
		@apply hover:!text-base-100;
	}
	.menu .active {
		@apply !bg-base-200 hover:!bg-base-200 !text-primary;
	}
	.menu li > *:active {
		@apply !bg-base-200 !text-primary;
	}
	.btn-ghost {
		@apply disabled:bg-transparent;
	}
	.checkbox {
		@apply border-2;
	}
	.select,
	.input,
	.textarea {
		@apply overflow-hidden outline bg-transparent outline-1 focus:outline-offset-0 border-0 !ring-0 !transition-all !duration-75 focus:outline-primary;
	}
	.toggle {
		@apply !bg-none !border-2;
	}
	.chat-bubble a {
		@apply !link !link-info;
	}
	.chat-bubble table {
		@apply !table !table-xs;
	}
	.chat-bubble table :where(thead, tfoot) {
		@apply !text-base-100;
	}
	.chat-bubble pre {
		@apply !my-4 !whitespace-pre-wrap;
	}
	.chat-bubble ul {
		@apply !list-disc !list-inside;
	}
	.chat-bubble ol {
		@apply !list-decimal !list-inside;
	}
}

.apexcharts-tooltip {
	@apply !rounded-lg !text-xs;
}

.apexcharts-toolbar {
	@apply !max-w-none !right-1/2 translate-x-1/2 gap-2;
}

.apexcharts-text,
.apexcharts-legend-text {
	@apply !font-medium;
}

.apexcharts-toolbar > * {
	@apply !m-0;
}

.apexcharts-toolbar-custom-icon {
	@apply !w-fit !h-fit;
}

.apexcharts-menu {
	@apply !rounded-lg !min-w-0 !bg-base-200 !border-neutral !border-2 !p-0 !mt-1 !right-1 overflow-hidden;
}

.apexcharts-menu > * {
	@apply !py-1 !px-2 hover:bg-base-300 font-medium transition-colors;
}

.apexcharts-series-scatter {
	cursor: pointer;
}
